// 相关歌单滑动界面
<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide
      v-for="(item, index) in data"
      :key="index"
      class="swiper-slide"
    >
      <img
        :src="item.image"
        class="song-list-img"
        :title="item.name"
        v-lazy="item.image"
        @click="selectItem(item, index)"
      />
      <p class="song-list-name">{{ item.name }}</p>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';

export default {
  name: 'slider',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 9,
        spaceBetween: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      },
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    selectItem(item, index) {
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  .swiper-slide {
    text-align: center;
    &:hover {
      .song-list-name {
        opacity: 1;
      }
    }
    .song-list-img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 10px;
      margin: auto;
    }
    .song-list-name {
      color: white;
      width: 100px;
      opacity: 0.5;
      @include no-wrap;
      margin: auto;
      padding: 10px 0;
    }
  }
}
</style>
